<template>
  <div class="app-container">
    <el-row :gutter="20" class="my-el-row">
      <el-col><el-button type="primary" @click="dialogVisibleTrue">添加用户</el-button></el-col>
    </el-row>
    <el-table v-if="activeName === 'first'" :data="productList" v-loading.body="listLoading" element-loading-text="Loading" border fit highlight-current-row>
      <el-table-column align="center" label='选择全部' width="80">
        <template slot-scope="scope">
        <el-checkbox ></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column label="用户名">
        <template slot-scope="scope">
          <el-row type="flex" justify="left">
            <el-row :span="9">{{scope.row.product_name}}</el-row>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column label="用户头像" >
        <template slot-scope="scope">
          <el-row>
            <el-col>
              <img class="user-avatar" :src="productImg"/>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column label="手机号码" align="center">
        <template slot-scope="scope">
          {{scope.row.price}}
        </template>
      </el-table-column>
      <el-table-column label="库存" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.stock}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-row>
            <el-button type="text" size="mini" @click="dialogVisibleTrue" round>编辑</el-button>
            <el-button type="text" size="mini" round>删除</el-button>
          </el-row>
        </template>
      </el-table-column>
    </el-table>
    <product-create :dialog-visible='dialogVisible' @visibleChanged="changeDialogVisible"></product-create>
  </div>
</template>

<script>
import { _getProductList } from '@/api/product'
import ProductCreate from '@/views/product/list/create'
export default {
  components: {
    ProductCreate
  },
  data() {
    return {
      productList: null,
      listLoading: true,
      checked: false,
      productImg: require('@/assets/index_images/product.png'),
      activeName: 'first',
      dialogVisible: false
    }
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    dialogVisibleTrue() {
      this.dialogVisible = true
      console.log('父组件设置visible为true')
      console.log(this.dialogVisible)
    },
    fetchData() {
      this.listLoading = true
      _getProductList(this.listQuery).then(response => {
        this.productList = response.data
        console.log(this.productList)
        this.listLoading = false
      })
    },
    // 对话框状态改变
    changeDialogVisible(data) {
      this.dialogVisible = data
    }
  }
}
</script>

<style scoped>
.my-el-row{
  margin-bottom: 20px;
}
.user-avatar{
  height: 60px;
  width: 60px;
  border-radius: 60px;
}
</style>
